<template>
  <div>
    <!-- 头部导航栏 -->
    <van-nav-bar
      title="我的活动"
      left-arrow
      @click-left="onClickLeft"
      style="background-color: gray;"
      fixed="true"
      placeholder="true"
    />

    <!-- 头部标题 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item title="我发起的活动" size="50" style="font-size: 24px;" name="1">
        <!-- 活动列表 -->
        <van-list
          v-model="loading"
          :finished="finished"
        >
          <van-cell v-for="item in 8">
            <a href="/activitylist">
              <div class="list">
                <div class="left">
                  <van-icon name="checked" size="30" />
                </div>
                <div class="center">
                  <p>标题</p>
                  <span>时间</span>
                </div>
                <div class="right">
                  <van-icon name="arrow" size="30" />
                </div>
              </div>
            </a>
          </van-cell>
        </van-list>
      </van-collapse-item>
      <van-collapse-item title="我参与的活动" name="2">
        <van-cell>
          <div class="list">
            <div class="left">
              <van-icon name="checked" size="30" />
            </div>
            <div class="center">
              <p>标题</p>
              <span>时间</span>
            </div>
            <div class="right">
              <van-icon name="arrow" size="30" />
            </div>
          </div>
        </van-cell>
      </van-collapse-item>
      <van-collapse-item title="我关注的活动" name="3">
        <van-cell>
          <div class="list">
            <div class="left">
              <van-icon name="checked" size="30" />
            </div>
            <div class="center">
              <p>标题</p>
              <span>时间</span>
            </div>
            <div class="right">
              <van-icon name="arrow" size="30" />
            </div>
          </div>
        </van-cell>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeNames: ['1'],
        list: [],
        loading: true,
        finished: true,
      };
    },

    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
    },

    mounted () {
      
    },
  }
</script>

<style lang="scss" scoped>
.list{
  display: flex;
  border: 2px solid #000000;
  border-radius: 20px;
  padding: 10px;
  justify-content: space-between;
  .left{
    width: 25%;
    margin-left: 5%;
    margin-top: 0.3rem;
  }
  .center{
    width: 60%;
    p{
      padding: 0;
      margin: 0;
      color: #000000;
    }
  }
  .right{
    width: 25%;
    margin-right: -2rem;
    margin-top: 0.5rem;
  }
}
</style>